<template>
	<view class="login-container">
		<!-- 火箭图标 -->
		<view class="logo-container">
			<image src="/static/rocket@2x.png" class="logo"></image>
		</view>
		<view class="input-content">
			<view class="input-item-groud">
				<view class="input-item">
					<input
						name="username"
						placeholder="请输入用户名"
						v-model="loginParams.username"
						@blur="validateUsername" />
				</view>
				<span v-if="usernameError" class="error">
					{{ usernameError }}
				</span>
			</view>
			<view class="input-item-groud">
				<view class="input-item">
					<input
						name="password"
						v-model="loginParams.password"
						:type="inputType"
						placeholder="请输入密码"
						maxlength="20"
						@blur="validatePassword" />
					<icon
						@click="togglePasswordVisibility"
						:class="
							inputType === 'text'
								? 'iconfont  icon-yanjing_xianshi_o'
								: 'iconfont icon-yanjing_yincang_o'
						"></icon>
				</view>
				<span v-if="passwordError" class="error">
					{{ passwordError }}
				</span>
			</view>

			<button
				class="confirm-btn"
				:disabled="btnLoading"
				:loading="btnLoading"
				@click="submit">
				登录
			</button>
		</view>
	</view>
</template>

<script>
//npm install vuelidate --save
import { reqLogin, reqFreePsw, getUserInfo } from "../../api/index.js";
import { required, minLength } from "vuelidate/lib/validators";
export default {
	data() {
		return {
			inputType: "password", // 初始为密码类型
			btnLoading: false, //初始登录状态
			loginParams: {
				username: "",
				password: "",
				login_type: 1,
			},
			usernameError: "",
			passwordError: "",
			validations: {
				loginParams: {
					username: {
						required,
					},
					password: {
						required,
						minLength: minLength(3),
					},
				},
			},
		};
	},
	onLoad(option) {
		if (option.token) {
			console.log("token:", option.token); // name eagle
			this.getToken(option.token);
		}
	},
	methods: {
		async getToken(token) {
			this.btnLoading = true;
			reqFreePsw({ token })
				.then((res) => {
					this.btnLoading = false;
					uni.showToast({
						title: "登录成功",
						icon: "success",
						duration: 2000,
					});

					const expires_in = res.data.expires_in;
					const expirationTime =
						new Date().getTime() + expires_in * 1000; //过期时间
					uni.setStorageSync("expirationTime", expirationTime);
					uni.setStorageSync("token", res.data.access_token);
					uni.setStorageSync("Bearer", res.data.bearer);
					this.getUserDetail();
				})
				.catch((err) => {
					console.log(err, "ppp");
					this.btnLoading = false;
					uni.showToast({
						title: err,
						icon: "none",
						duration: 2000,
					});
				});
		},
		async getUserDetail() {
			getUserInfo()
				.then((res) => {
					console.log(res);
					let obj = {
						username: res.data.username,
						password: "",
						login_type: 1,
					};
					uni.setStorageSync("userInfo", JSON.stringify(obj));
					uni.switchTab({
						url: "/pages/index/index",
					});
				})
				.catch((err) => {
					console.log(err, "ppp");
					this.btnLoading = false;
					uni.showToast({
						title: err,
						icon: "none",
						duration: 2000,
					});
				});
		},
		togglePasswordVisibility() {
			this.inputType =
				this.inputType === "password" ? "text" : "password";
		},
		// 验证用户名
		validateUsername() {
			if (!this.loginParams.username) {
				this.usernameError = "用户名不能为空";
			} else {
				this.usernameError = "";
			}
		},
		// 验证密码
		validatePassword() {
			if (!this.loginParams.password) {
				this.passwordError = "密码不能为空";
			} else if (this.loginParams.password.length < 3) {
				this.passwordError = "密码不能少于3位";
			} else {
				this.passwordError = "";
			}
		},
		// 提交表单
		// 提交表单
		submit() {
			// 校验用户名和密码
			this.validateUsername();
			this.validatePassword();

			if (this.usernameError || this.passwordError) {
				return false;
			} else {
				this.btnLoading = true;
				reqLogin(this.loginParams)
					.then((res) => {
						this.btnLoading = false;
						uni.showToast({
							title: "登录成功",
							icon: "success",
							duration: 2000,
						});
						// const token = res.data.access_token;
						const expires_in = res.data.expires_in;
						const expirationTime =
							new Date().getTime() + expires_in * 1000; //过期时间
						uni.setStorageSync("expirationTime", expirationTime);
						uni.setStorageSync("token", res.data.access_token);
						uni.setStorageSync("Bearer", res.data.bearer);
						uni.setStorageSync(
							"userInfo",
							JSON.stringify(this.loginParams)
						);
						uni.switchTab({
							url: "/pages/index/index",
						});
					})
					.catch((err) => {
						console.log(err, "ppp");
						this.btnLoading = false;
						uni.showToast({
							title: err,
							icon: "none",
							duration: 2000,
						});
					});
			}
		},
	},
};
</script>

<style lang="scss">
// page {
// 	background: $color-white;
// }
.login-container {
	padding-top: 100px;
	position: relative;
	width: 100vw;
	overflow: hidden;
	background: #fff;
}

.logo-container {
	display: flex;
	justify-content: center;

	.logo {
		width: 260px;
		height: 260px;
	}
}

.input-content {
	padding: 0 16px;

	.input-item-groud {
		margin: 20px 0;
		.error {
			color: #f34d37;
			font-size: 12px;
			margin-left: 40upx;
		}
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		position: relative;

		border-radius: 4px;

		border: 1px solid #ccc;

		input {
			height: 44px;
			list-style: 44px;
			width: 100%;
			border-radius: 4px;
			font-size: 14px;
			font-weight: 300;
			background-color: white !important;
			/* 设置背景颜色为白色或其他颜色 */
			outline: none;
		}
	}

	.iconfont {
		position: absolute;
		right: 10px;
		/* 距离右侧10px */
		top: 50%;
		/* 垂直居中 */
		transform: translateY(-50%);
		/* 垂直居中 */
		cursor: pointer;
		/* 鼠标悬停时显示手型 */
		font-size: 24px;
		color: #bdbdbd;
	}
}

.confirm-btn {
	background-color: blue;
	/* 设置默认背景色为蓝色 */
	color: #fff;
	/* 字体颜色 */
	border: none;
	/* 去掉边框 */
	border-radius: 5px;
	/* 圆角 */
	cursor: pointer;
	/* 鼠标指针样式 */
	font-size: 14px;
	height: 44px;
	line-height: 44px;
}
</style>
